<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>查看用户登录日志</title>

  <script src="../../js/axios.min.js"></script>

  <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">

  <style>
    table {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    td,
    th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    tr:hover {
      background-color: #ddd;
    }

    th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #4CAF50;
      color: white;
    }
  </style>
</head>

<body>
  <h2 style="text-align: center;">查看用户登录日志</h2>

  <form>
    <label for="userId">用户Id：</label>
    <input type="text" id="userId" name="userId">

    <label for="account">用户账号：</label>
    <input type="text" id="account" name="account">

    <label for="queryType">用户类型：</label>
    <select id="queryType" name="queryType">
      <option value="0">查询用户</option>
      <option value="1">查询管理员</option>
    </select>

    <label for="startTime">起始时间：</label>
    <input type="date" id="startTime" name="startTime">

    <label for="endTime">截至时间：</label>
    <input type="date" id="endTime" name="endTime">

    <input type="button" value="查询" onclick="queryLogs()">
  </form>

  <table>
    <thead>
        <th>日志ID</th>
        <th>用户ID</th>
        <th>账号</th>
        <th>姓名</th>
        <th>用户角色</th>
        <th>日志时间</th>
        <th>操作描述</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="logTableBody">

    </tbody>
  </table>
  <script>
        function queryLogs() {
      var userId = document.getElementById("userId").value;
      var account = document.getElementById("account").value;
      var queryType = document.getElementById("queryType").value;
      var startTime = document.getElementById("startTime").value;
      var endTime = document.getElementById("endTime").value;

      // 构造请求参数对象
      var params = {
        userId: userId,
        account: account,
        queryType: queryType,
        startTime: startTime,
        endTime: endTime
      };

      // 发送HTTP请求
      axios.post('http://localhost:8888/api/users/queryLogs', params )
        .then(function (response) {
          var data = response.data.data;
          // 将数据渲染到表格中
          var logTableBody = document.getElementById("logTableBody");
          logTableBody.innerHTML = ""; // 先清空表格内容

          if (data.length > 0) {
            data.forEach(function (log) {
              var userRole = ""
                if(log.userRole===0)userRole="普通用户"
                else if(log.userRole===1)userRole="管理员"
                else if(log.userRole===2)userRole="系统管理员"
              var tr = document.createElement("tr");
              tr.innerHTML =
              "<td>" + log.logId + "</td>" +
                "<td>" + log.userId + "</td>" +
                "<td>" + log.account + "</td>" +
                "<td>" + log.name + "</td>" +
                "<td>" + userRole + "</td>" +
                "<td>" + log.logTime + "</td>" +
                "<td>" + log.logMessage + "</td>";
                var copyButton = document.createElement("button");
                    copyButton.innerText = "复制账号";
                    copyButton.addEventListener("click", function() {
                    copyToClipboard(log.account);
                    });
                    tr.appendChild(copyButton);

                    logTableBody.appendChild(tr);
            });
          } else {
            var tr = document.createElement("tr");
            tr.innerHTML = "<td colspan='7'>暂无匹配日志信息</td>";
            logTableBody.appendChild(tr);
          }
        })
        .catch(function (error) {
          console.error(error);
        });
    }

    window.onload = function() {
        queryLogs();
      };
    function copyToClipboard(text) {
        var tempInput = document.createElement("input");
        tempInput.style.position = "absolute";
        tempInput.style.left = "-9999px";
        tempInput.value = text;
        document.body.appendChild(tempInput);
        tempInput.select();
        document.execCommand("copy");
        document.body.removeChild(tempInput);
      }

  </script>
</body>
</html>
